<template>
  <div class="container">
    <div class="post-wrap carousel" >
      <div
        ref="posts"
        class="posts"
        v-for="(item, index) in result.data.dataSet"
        :key="index"
      >
        <img
          class="posts-cover"
          :src="`https://picsum.photos/1344/500?a=${index}`"
        />
        <span class="posts-title">{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  async asyncData(context) {
    const { data } = await context.$axios.get('posts',{
      params:{
      pageSize: 6
    }
    })
    return {
      result: data,
    }
  },
  mounted() {
  },
  methods: {
    
  },
  destroyed() {
  },
}
</script>
<style lang="scss">
.container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .post-wrap {
    .posts {
      height: 500px;
      width: 1334px;
      background: #dddddd;
      .posts-cover {
        max-width: 100%;
      }
    }
  }
}
</style>
